<template>
    <div class="container">
        <div class="notice-bar mar-b-14">
            <van-icon name="info-o" color="#333333" size="18px"/>
            <span class="font-12 mar-l-10">选择后系统将根据您设置的条件自动添加顾客到分组</span>
        </div>
        <div class="group-type" v-for="(item,index) in dataList" :key="index" @click="onShowDialog(item.name)">
            <div>
                <img v-if="fileSpace" class="width-40 height-47.5" :src="item.imgSrc" />
            </div>
            <div class="mar-l-23">
                <div class="font-15 font-w">{{item.title}}</div>
                <div class="font-12 font-color-9">{{item.content}}</div>
            </div>
        </div>
        <van-popup :show="showDateTimePopup" position="bottom" :z-index="9999" :overlay="false">
          <van-datetime-picker 
              :value="showTime" 
              :formatter="formatter"
              @input="dateTimeInput"
              @confirm='confirmClick'
              @cancel="showDateTimePopup = !showDateTimePopup"
              type="date"/>
        </van-popup>
        <div class="show-dialog count-dialog">
            <van-dialog
                use-slot
                title="根据消费次数"
                :show="dialogObj.showCountDialog"
                show-cancel-button
                confirmButtonText="确定添加"
                @confirm="onConfirmCount"
                @close="onCloseDialog('showCountDialog')"
            >
                <div class="select-row">
                    <div class="flex flex-between">
                        <input type="number" placeholder="0" v-model="countShow.buyDown" @change="handleChange">次
                    </div>
                    <div class="dividing-line"></div>
                    <div class="flex flex-between">
                        <input type="number" placeholder="最高数值" v-model="countShow.buyUpper" @change="handleChange">次
                    </div>
                </div>
            </van-dialog>
        </div>
        <div class="show-dialog count-dialog">
            <van-dialog
                use-slot
                title="根据消费金额"
                :show="dialogObj.showCoinDialog"
                show-cancel-button
                confirmButtonText="确定添加"
                @confirm="onConfirmCoin"
                @close="onCloseDialog('showCoinDialog')"
            >
                <div class="select-row">
                    <div class="flex flex-between">
                        <input type="number" placeholder="0" v-model="coinShow.buyAmountDown">元
                    </div>
                    <div class="dividing-line"></div>
                    <div class="flex flex-between">
                        <input type="number" placeholder="最高数值" v-model="coinShow.buyAmountUpper">元
                    </div>
                </div>
            </van-dialog>
        </div>
        <div class="show-dialog time-dialog">
            <van-dialog
                use-slot
                title="一段时间没购买"
                :show="dialogObj.showNobuyDialog"
                show-cancel-button
                confirmButtonText="确定添加"
                @confirm="onConfirmNobuy"
                @close="onCloseDialog('showNobuyDialog')"
            >
                <div class="select-row">
                    <div class="flex flex-between">
                        <input type="text" placeholder="开始时间" v-model="nobuyShowData.startDate" disabled @click="showDataTime(1)" />
                    </div>
                    <div class="dividing-line"></div>
                    <div class="flex flex-between">
                        <input type="text" placeholder="结束时间" v-model="nobuyShowData.endDate" disabled @click="showDataTime(2)" />
                    </div>
                </div>
            </van-dialog>
        </div>
        <div class="show-dialog time-dialog">
            <van-dialog
                use-slot
                title="一段时间有购买"
                :show="dialogObj.showBuyDialog"
                show-cancel-button
                confirmButtonText="确定添加"
                @confirm="onConfirmBuy"
                @close="onCloseDialog('showBuyDialog')"
            >
                <div class="select-row">
                    <div class="flex flex-between">
                        <input type="text" placeholder="开始时间" v-model="buyShowData.startDate" disabled @click="showDataTime(3)" />
                    </div>
                    <div class="dividing-line"></div>
                    <div class="flex flex-between">
                        <input type="text" placeholder="结束时间" v-model="buyShowData.endDate" disabled @click="showDataTime(4)" />
                    </div>
                </div>
            </van-dialog>
        </div>
    </div>
</template>
<script>
import { saveMind } from '@/api/personal'
export default {
  data() {
    return {
      dataList: [],
      dialogObj: {
        showCountDialog: false,
        showCoinDialog: false,
        showNobuyDialog: false,
        showBuyDialog: false
      },
      labelGroupId: null,
      showDateTimePopup: false, // 时间选择器弹出
      showTime: null, // 时间选择器绑定的值
      inputDateTimeType: 0, // 用来判断点击的是哪个时间输入框
      formatter(type, value) {
        console.log(type)
        //   时间选择器的时间显示格式
        if (type === 'year') {
          return `${value}年`
        } else if (type === 'month') {
          return `${value}月`
        } else if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      countShow: {
        buyDown: 0,
        buyUpper: ''
      },
      countParams: {
        buyDown: '',
        buyUpper: '',
        memberId: null,
        conditionType: 1,
        labelGroupId: null
      },
      coinShow: {
        buyAmountDown: 0,
        buyAmountUpper: ''
      },
      coinParams: {
        buyAmountDown: '',
        buyAmountUpper: '',
        memberId: null,
        conditionType: 2,
        labelGroupId: null
      },
      nobuyParams: {
        startDate: null,
        endDate: null,
        memberId: null,
        conditionType: 3,
        labelGroupId: null
      },
      buyParams: {
        startDate: null,
        endDate: null,
        memberId: null,
        conditionType: 4,
        labelGroupId: null
      },
      nobuyShowData: {
        startDate: null,
        endDate: null
      },
      buyShowData: {
        startDate: null,
        endDate: null
      }
    }
  },
  onLoad() {
    // 重置缓存data里面的数据
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.labelGroupId = this.getCurrentPage().query.labelGroupId
    this.dataList = [
      {
        name: 'showCountDialog',
        title: '购买次数',
        content: '筛选达到指定购买次数区间的顾客',
        imgSrc: this.fileSpace + '/images/group-count.png'
      },
      {
        name: 'showCoinDialog',
        title: '消费金额',
        content: '筛选达到指定消费金额区间的顾客',
        imgSrc: this.fileSpace + '/images/group-coin.png'
      },
      {
        name: 'showNobuyDialog',
        title: '一段时间没购买',
        content: '筛选距当前一段时间内没有购买的顾客',
        imgSrc: this.fileSpace + '/images/group-nobuy.png'
      },
      {
        name: 'showBuyDialog',
        title: '一段时间有购买',
        content: '筛选距当前一段时间内有购买的顾客',
        imgSrc: this.fileSpace + '/images/group-buy.png'
      }
    ]
  },
  methods: {
    // formatter(type, value) {
    //   console.log(type)
    //   //   时间选择器的时间显示格式
    //   if (type === 'year') {
    //     return `${value}年`
    //   } else if (type === 'month') {
    //     return `${value}月`
    //   } else if (type === 'day') {
    //     return `${value}日`
    //   }
    //   return value
    // },
    onShowDialog(name) {
      this.dialogObj[name] = true
    },
    onCloseDialog(name) {
      this.dialogObj[name] = false
      this.showDateTimePopup = false
    },
    dateTimeInput(event) {
      // 时间选择变化时触发事件 当做中间处理事件为展示的时间赋值
      this.showTime = event.mp.detail
    },
    confirmClick(value) {
      // 时间选择器确认选择事件
      switch (this.inputDateTimeType) {
        case 1:
          this.nobuyShowData.startDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy/MM/dd')
          this.nobuyParams.startDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy-MM-dd') + ' 00:00:00'
          break
        case 2:
          this.nobuyShowData.endDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy/MM/dd')
          this.nobuyParams.endDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy-MM-dd') + ' 00:00:00'
          break
        case 3:
          this.buyShowData.startDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy/MM/dd')
          this.buyParams.startDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy-MM-dd') + ' 00:00:00'
          break
        case 4:
          this.buyShowData.endDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy/MM/dd')
          this.buyParams.endDate = this.$utils.formatTimeToDate(this.showTime, 'yyyy-MM-dd') + ' 00:00:00'
          break
        default:
          break
      }
      this.showDateTimePopup = false // 关闭弹出框
    },
    showDataTime(value) {
      this.inputDateTimeType = value
      // 点击输入框的时 如果有默认值展示默认值
      switch (value) {
        case 1:
          this.showTime = this.nobuyShowData.startDate ? new Date(this.nobuyShowData.startDate).getTime() : new Date().getTime()
          break
        case 2:
          this.showTime = this.nobuyShowData.endDate ? new Date(this.nobuyShowData.endDate).getTime() : new Date().getTime()
          break
        case 3:
          this.showTime = this.buyShowData.startDate ? new Date(this.buyShowData.startDate).getTime() : new Date().getTime()
          break
        case 4:
          this.showTime = this.buyShowData.endDate ? new Date(this.buyShowData.endDate).getTime() : new Date().getTime()
          break
        default:
          break
      }
      this.showDateTimePopup = true
    },
    handleChange() {
      // 输入框的文本变化监听
      // console.log(this.reg(this.countParams.startDate))
      // // 可能为空
      // if (!this.reg(this.countParams.startDate)) {
      //   this.$utils.showToast({ title: '请输入正整数!' })
      // }
      this.countShow.buyDown = parseInt(this.countShow.buyDown)
      this.countShow.buyUpper = parseInt(this.countShow.buyUpper)
      this.coinParams.buyAmountDown = parseInt(this.coinParams.buyAmountDown)
      this.coinParams.buyAmountUpper = parseInt(this.coinParams.buyAmountUpper)
    },
    onConfirmCount() {
      // 按购买次数来智能添加顾客
      this.countParams.buyDown = this.countShow.buyDown === '' ? 0 : this.countShow.buyDown
      this.countParams.buyUpper = this.countShow.buyUpper === '' ? 0 : this.countShow.buyUpper
      this.countParams.memberId = this.getCustomerId
      this.countParams.labelGroupId = this.labelGroupId
      this.intelligenceAdd(this.countParams)
    },
    onConfirmCoin() {
      // 按消费金额来智能添加顾客
      this.coinParams.buyAmountDown = this.coinShow.buyAmountDown === '' ? 0 : this.coinShow.buyAmountDown
      this.coinParams.buyAmountUpper = this.coinShow.buyAmountUpper === '' ? 0 : this.coinShow.buyAmountUpper
      this.coinParams.memberId = this.getCustomerId
      this.coinParams.labelGroupId = this.labelGroupId
      this.intelligenceAdd(this.coinParams)
    },
    onConfirmNobuy() {
      // 按一段时间没购买来智能添加顾客
      this.nobuyParams.memberId = this.getCustomerId
      this.nobuyParams.labelGroupId = this.labelGroupId
      this.intelligenceAdd(this.nobuyParams)
    },
    onConfirmBuy() {
      // 按一段时间有购买来智能添加顾客
      this.buyParams.memberId = this.getCustomerId
      this.buyParams.labelGroupId = this.labelGroupId
      this.intelligenceAdd(this.buyParams)
    },
    intelligenceAdd(params) {
      // 智能添加顾客的方法
      saveMind(params).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: response.msg })
        setTimeout(() => {
          this.$pt.navigateBack({
            delta: 1
          })
          // this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/intelligence-add/main?labelGroupId=' + this.labelGroupId})
        }, 1500)
      }).catch({})
    },
    reg(value) {
      let reg = /^([1-9]\d*|0)(\.\d*[1-9])?$/
      return reg.test(value)
    }
  }
}
</script>
<style lang="less" scoped>
.notice-bar{
    border-top: 1px solid #ededed;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    display: flex;
    justify-content: left;
    align-items: center;
    background: #fbf3d4;
    /deep/ .van-icon{
        line-height: 30px;
    }
}
.group-type{
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0 12px;
    height: 100px;
    margin: 0 15px;
    background: white;
    border-radius: 5px;
    margin-bottom: 10px;
}
.show-dialog{
    /deep/ .van-button--large{
        height: 48px;
    }
    .select-row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        border: .5px solid #c5c5c5;
        border-radius: 3px;
        margin: 25px 12px;
        padding: 0 12px;
        .dividing-line{
            width: 30px;
            height: 1px;
            background: #c5c5c5;
        }
        input{
            border: unset;
            padding: 0;
            // border: .5px solid #c5c5c5;
            width: 63px;
            line-height: unset!important;
            height: unset!important;
            min-height: unset!important;
            border-radius: 0px;
            font-size: 15px!important;
            color: #999999;
            display: inline-block;
            text-align: center;
        }
    }
}
.count-dialog{
  .select-row{
    input{
      margin: 0 18px 0 0 !important;
    }
  }
}
.time-dialog{
  .select-row{
    padding: 0 25px;
      input{
        margin: 0 !important;
        width: 93px;
      }
    }
}
</style>
